<!--
 * @Author: zegobuilder zegobuilder@zego.im
 * @Date: 2022-11-01 19:50:11
 * @LastEditors: zegobuilder zegobuilder@zego.im
 * @LastEditTime: 2023-02-16 18:28:56

-->
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <title>Zego Express Video Call</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <!-- <script src="./dist/ZegoExpressWebRTC.js"></script> -->
  <script src="./js/ZegoExpressWebRTC-2.22.0.js"></script>
  <link rel="stylesheet" href="css/styles.css" />
</head>

<body>
  <h1>Zego RTC Video Call</h1>
  <div class="video-wrapper">
    <button onclick="logoutRoom()">退出房间</button>
    <button onclick="login()">登录</button>
    <button onclick="addCamera()">新增摄像头</button>
    <button onclick="enableCamera()">开关摄像头</button>
    <button onclick="enableMic()">开关麦克风</button>
    <input type="text">
    <br />
    <hr />
    <h4>Local video</h4>
    <h4>Remote video</h4>
    <video id="local-video" autoplay muted playsinline controls></video>
    <div class="remoteVideo" autoplay muted playsinline controls></video>
    <dic id="remoteVideo" ></div>
    <div id="rv"></div>
  </div>
  <div id="information"></div>
  　　<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
</body>
<script>
  //初始化信息
  let appID = 1739272706
  let server = 'wss://webliveroom-test.zego.im/ws'

  let userID = 'alagong' // userID 用户自己设置，必须保证全局唯一
  let userName = '阿拉贡' // userName 用户自己设置，没有唯一性要求
  let roomID = 'room007' // roomID 用户自己设置，必须保证全局唯一

  let localStream = null
  let localAuidoStream = null
  let localVideoStream = null
  let localVideoTrack = null
  let localAudioTrack = null
  let mutedCamera = false
  let useLocalStreamList=[];
  let remoteStream= null;
  // 初始化实例
  const zg = new ZegoExpressEngine(appID, server)
  zg.setDebugVerbose(false);
  window.onload = function () {
    // 加入房间
    fetch(
        `https://wsliveroom-alpha.zego.im:8282/token?app_id=${appID}&id_name=${userID}`
      )
      .then((rsp) => rsp.text())
      .then((token) => {
        accessToken = token
        login()
      })

  }

  zg.on('roomStreamUpdate', async (roomID, updateType, streamList, extendedData) => {
    console.log('roomStreamUpdate 1 roomID ', roomID, streamList, extendedData);
    if (updateType == 'ADD') {
      for (let i = 0; i < streamList.length; i++) {
        console.info(streamList[i].streamID + ' was added');
        let remoteStream;
        let playOption;

        if ($("#videoCodec").val()) playOption.videoCodec = $("#videoCodec").val();

        zg.startPlayingStream(streamList[i].streamID, playOption).then(stream => {
          remoteStream = stream;
          useLocalStreamList.push(streamList[i]);

          $('.remoteVideo').append($(
            `<video id=${streamList[i].streamID} autoplay muted playsinline controls></video>`));
          const video = $('.remoteVideo video:last')[0];
          console.warn('video', video, remoteStream);
          video.srcObject = remoteStream;
          // video.muted = false;
        }).catch(err => {
          console.error('err', err);
        });

      }
    } else if (updateType == 'DELETE') {
      for (let k = 0; k < useLocalStreamList.length; k++) {
        for (let j = 0; j < streamList.length; j++) {
          if (useLocalStreamList[k].streamID === streamList[j].streamID) {
            try {
              zg.stopPlayingStream(useLocalStreamList[k].streamID);
            } catch (error) {
              console.error(error);
            }
            console.info(useLocalStreamList[k].streamID + 'was devared');

            $('.remoteVideo video:eq(' + k + ')').remove();
            useLocalStreamList.splice(k--, 1);
            break;
          }
        }
      }
    }
  });

  function login() {
    zg.loginRoom(
        roomID,
        accessToken, {
          userID,
          userName
        }, {
          userUpdate: true
        }
      )
      .then((rsp) => console.error('[xxx]', rsp))
      .catch((err) => console.error('[yyyy]', err))
  }
</script>

</html>